<template>
	<view class="box">
		<view class="userInfo">
			<view class="title" :style="{marginTop:statusBarHeight + 'rpx'}">
				我的
			</view>
			<view class="avatar_box flc">
				<view class="avatar">
					<u-avatar :src="userInfo.avatar_format" mode="circle" size="140"></u-avatar>
				</view>
				<view class="name jsbc">
					<view class="left">
						<span v-if="userInfo">{{userInfo.nickname}}</span>
						<span v-else>还未登录账号</span>
						<view class="login" v-if="!userInfo" @click="goLogin">
							<span>立即登录</span>
						</view>
					</view>
					<view class="right flc" >
						<view class="item mr2" style="position: relative;" @click="goSystem">
							<u-icon :name="'/static/ucenter/xxtz.png'" size="42"></u-icon>
							<u-badge type="error" :is-dot="true" :offset='[-10,-10]'></u-badge>
						</view>
						<view class="item ml2" @click="goSetting">
							<u-icon :name="'/static/ucenter/sz.png'" size="42"></u-icon>
						</view>
					</view>
				</view>

			</view>
			<view class="balance_box jsbc">
				<view class="balance" @click="goWallet">
					<view class="num">
						{{wallet.balance||0}}
					</view>
					<view class="point">
						我的余额
					</view>
				</view>
				<view class="balance" @click="goPoint()">
					<view class="num">
						{{wallet.points||0}}
					</view>
					<view class="point">
						积分
					</view>
				</view>
				<view class="balance" @click="goPages()">
					<view class="num">
						{{wallet.teams||0}}
					</view>
					<view class="point">
						团队
					</view>
				</view>

			</view>
		</view>
		<view class="order">
			<view class="order_top jsbc">
				<view class="left flc">
					<span class="">我的订单</span>
				</view>
				<view class="right flc" @click="goOrder(-1)">
					<span class="mr2">更多</span><u-icon name="arrow-right'" size="32" color="#dedede"></u-icon>
				</view>
			</view>
			<view class="ordertab jsbc">
				<view class="item" v-for="(item,index) in sendOrder" :key="index" @click="goOrder(index)">
					<view class="icon">
						<u-icon :name="item.icon" size="60"></u-icon>
					</view>
					<view class="name">
						{{item.name}}
					</view>
					<u-badge type="error" :count="item.count" :offset='[-10,-10]'></u-badge>
				</view>
			</view>
		</view>

		<view class="u-demo-area">
			<u-cell-group>
				<u-cell-item :title="item.name" v-for="(item,index) in tab" :key="index" @click="goPage(item)">
					<template v-slot:icon>
						<u-icon class="mr2" size="40" :name="item.icon"></u-icon>
					</template>
				</u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,

	} from '../../api/user.js'
	import {
		getWallet
	} from '@/api/user.js'
	import baseUrl from '@/config/config.js'
	import {
		closeload,
		tiao,
		toast,
		toastload
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				style: {
					background: 'transparent'
				},
				userInfo: "",
				sendOrder: [{
						icon: "/static/ucenter/dfk.png",
						name: "待付款",
						count: ""
					},
					{
						icon: "/static/ucenter/dfh.png",
						name: "待发货",
						count: ""
					},
					{
						icon: "/static/ucenter/dsh.png",
						name: "待收货",
						count: ""
					},
					{
						icon: "/static/ucenter/dpj.png",
						name: "待评价",
						count: ""
					},
					{
						icon: "/static/ucenter/ywc.png",
						name: "已完成",
						count: ""
					}
				],

				tab: [{
						id: "0",
						name: "邀请推荐",
						icon: "/static/ucenter/yqtj.png",
						path: "/other/inviteFriend/inviteFriend",
						open: true,
					},
					{
						id: "1",
						name: "商家中心",
						icon: "/static/ucenter/sjzx.png",
						open: true,
						path: "/other/storeSettle/storeSettle"
						// path: "/other/storeCenter/storeCenter"
					},
					{
						id: "2",
						name: "积分商城",
						open: false,
						icon: "/static/ucenter/jfsc.png",
						path: "/page/pointShop/pointShop"
					},

					{
						id: "3",
						name: "地址管理",
						icon: "/static/ucenter/dzgl.png",
						open: true,
						path: "/other/delivery-address/delivery-address"
					},
					{
						id: "4",
						name: "关于我们",
						icon: "/static/ucenter/gywm.png",
						open: false,
						path: "/other/webData/webData?type=4"
					},
					{
						id: "5",
						name: "我的银行卡",
						icon: "/static/ucenter/bank.png",
						open: true,
						path: "/other/my-card/my-card"
					},
				],
				icon: 'setting',
				arrow: true,
				label: '',
				title: '青山一道同云雨',
				rightSlot: true,
				checked: false,
				wallet:"",
				statusBarHeight: uni.getStorageSync("statusBarHeight") || "",
				customBarHeight: uni.getStorageSync("customBarHeight") || ""
			}
		},
		onLoad(res) {
			getWallet().then(res=>{
				this.wallet = res.data
			})
		},
		onShow() {
			let token = uni.getStorageSync("access_token")
			if (!token) {
				this.userInfo = ''
				// #ifdef MP-WEIXIN
				uni.showModal({
					title: '提示',
					content: "你还没有登录,是否去登录",
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						console.log(res);
						if (res.confirm == true) {
							uni.navigateTo({
								url: '/pages/wx-login/wx-login'
							})
						}

					},
				})
				//  #endif
			} else {
				toastload()
				getUserInfo().then(res => {
					console.log("用户信息", res);
					this.userInfo = res.data
					if(res.data.is_store!==0){
						this.tab[1].path = '/other/storeCenter/storeCenter'
						uni.setStorageSync('is_store',res.data.is_store)
					}
					if (res.error) {
						closeload()
						// #ifdef MP-WEIXIN
						uni.showModal({
							title: '提示',
							content: "你还没有登录,是否去登录",
							cancelText: '取消',
							confirmText: '确定',
							success: function(res) {
								console.log(res);
								if (res.confirm == true) {
									uni.navigateTo({
										url: '/pages/wx-login/wx-login'
									})
								}

							},
						})
						//  #endif
					} else {

					}
				})
			}
		},
		methods: {
			goPage(item) {
				if (item.open) {
					tiao(item.path)
				} else {
					uni.navigateTo({
						url: item.path
					})
				}
			},
			goOrder(index) {
				index = index + 1
				uni.navigateTo({
					url:'/page/myOrder/myOrder?id=' + index
				})
				// tiao('/page/myOrder/myOrder?id=' + index)
			},
			goPages() {
				tiao('/other/uteam/uteam')
			},
			goPoint() {
				uni.navigateTo({
					url:'/page/pointBills/pointBills'
				})
				// tiao('/page/pointBills/pointBills')
			},
			goWallet(){
				uni.navigateTo({
					url:'/other/wallet/wallet'
				})
			},
			goLogin() {
				// #ifdef MP-WEIXIN
				uni.navigateTo({
					url: '/pages/wx-login/wx-login'
				})
				//  #endif
				// #ifdef APP||H5
				uni.navigateTo({
					url: '/page/login/login'
				})
				//  #endif
			},
			goSetting() {
				uni.navigateTo({
					url: '/other/setting/setting'
				})
			},
			goSystem() {
				uni.navigateTo({
					url: '/other/systemNotice/systemNotice'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.ubg {
		position: absolute;
		top: 0;
		width: 750rpx;
	}

	.typeBtn {
		width: 20%;
		background-color: rgba(0, 0, 0, 0);
		font-size: 26rpx;
		padding: 0;
		color: #333;
		margin: 0;
		height: 120rpx;
		color: #333;
		font-size: 26rpx;
		margin-top: 40rpx;

		&::after {
			border: none;
		}

		.items {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
		}

		.items .icons {
			width: 60rpx;
			height: 60rpx;
			margin-top: 10rpx;
		}
	}

	.userInfo {
		min-height: 480rpx;
		box-sizing: border-box;
		padding: 60rpx 20rpx 0 20rpx;
		background: url('https://app.jhsppf.cn/jhsp/bg.png') no-repeat;
		background-size: 100%;

		.title {
			font-size: 36rpx;
			color: #333333;
		}

		.login {
			width: 120rpx;
			height: 42rpx;
			background: #FCB444;
			border-radius: 21rpx;
			text-align: center;
			line-height: 42rpx;
			font-size: 24rpx;
			color: #F5ECDF;
		}

		.avatar_box {
			margin-top: 20rpx;
		}

		.name {
			width: 520rpx;
			margin-left: 20rpx;
			font-size: 32rpx;
			font-weight: 600rpx;
		}

		.balance_box {
			box-sizing: border-box;
			padding: 10rpx 80rpx;
			font-size: 32rpx;
			font-weight: 600;

			.balance {
				display: flex;
				flex-direction: column;
				align-items: center;
			}


		}
	}

	.order {
		min-height: 240rpx;
		width: 710rpx;
		// #ifdef APP-PLUS
		margin: -50rpx 20rpx 20rpx 20rpx;
		// #endif
		// #ifdef MP-WEIXIN
		margin: -20rpx 20rpx 20rpx 20rpx;
		// #endif

		border-radius: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20rpx;

		.ordertab {
			margin-top: 20rpx;

			.item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 100rpx;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: 600;
			}
		}
	}

	.tabBox {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.tabs .item {
		width: 20%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		height: 120rpx;
		font-size: 26rpx;
		color: #333;
		margin-top: 40rpx;
	}

	.myOrder .item,
	.menubar .item {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 120rpx;
		justify-content: space-between;
		box-sizing: border-box;

	}
</style>